<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="60%"
      title="表单详情"
      :before-close="handleClose"
    >
      <div slot="">
        <el-button
          slot=""
          type="primary"
          plain
          @click="handleExport"
          size="small"
          v-show="exportFlage"
        >
          导出
        </el-button>
      </div>
      <div>
        <el-form
          :model="commonForm"
          size="small"
          ref="commonform"
          :rules="commonRules"
        >
          <el-row>
            <el-col :span="24" class="table-title-area">
              <span class="table-title">公共机构基本信息</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-row>
                <el-col :span="24" class="single-label single-down">
                  <div class="down-label">
                    <el-form-item label="(单位盖章):"></el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="24" class="single-label single-down">
                  <div class="down-label">
                    <el-form-item
                      :label="year + '年'"
                      label-width="80px"
                    ></el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="24" class="single-label">
                  <el-form-item label="表号:" label-width="120px">
                    <!-- <el-input
                      size="small"
                      :style="'width: ' + topInputwidth + 'px'"
                    ></el-input> -->
                    <span>{{ commonForm.tableCode }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="single-label">
                  <el-form-item label="制定机关:" label-width="120px">
                    <span>{{ commonForm.enactingOrgan }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="single-label">
                  <el-form-item label="批准机关:" label-width="120px">
                    <span>{{ commonForm.approvalOrgan }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="single-label">
                  <el-form-item label="批准文号:" label-width="120px">
                    <span>{{ commonForm.approvalDocumentNum }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="single-label">
                  <el-form-item label="有效期至:" label-width="120px">
                    <span>{{ commonForm.periodOfValidity }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 表格内容 -->
          <el-row class="table-row">
            <el-col :span="24">
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="001 单位详情名称:"
                    :label-width="labelWidth + 'px'"
                    prop="companyName"
                  >
                    <el-input
                      size="small"
                      :style="'width: ' + lingInputwidth + 'px'"
                      v-model="commonForm.companyName"
                      :readonly="readonlyFlage"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="002 组织结构代码:"
                    :label-width="labelWidth + 'px'"
                  >
                    <div class="input-content">
                      <div>
                        <input
                          class="inline-input"
                          maxlength="1"
                          :readonly="readonlyFlage"
                          v-for="(item, index) in organizationStructureCode"
                          :key="index"
                          v-model.trim.number="item.value"
                          :ref="'organizationStructureCode' + item.thisInput"
                          @paste="
                            pasting(
                              $event,
                              item.thisInput,
                              'organizationStructureCode'
                            )
                          "
                          @keydown.8="
                            deleteValue(
                              item.thisInput,
                              'organizationStructureCode'
                            )
                          "
                          @keyup="
                            changeValue(
                              $event,
                              item.thisInput,
                              'organizationStructureCode'
                            )
                          "
                          @input="
                            handleInputtest(
                              item.value,
                              item.thisInput,
                              'organizationStructureCode'
                            )
                          "
                        />
                      </div>
                      <div class="organization-line">——</div>
                      <el-popover
                        class="inline--question inline--question1"
                        placement="top-start"
                        title=""
                        trigger="hover"
                      >
                        <p class="iqp">{{ tip1 }}</p>
                        <i slot="reference" class="el-icon-question"></i>
                      </el-popover>
                    </div>
                    <el-input
                      class="hide-input"
                      size="small"
                      v-model.trim="commonForm.organizationStructureCode"
                      :readonly="readonlyFlage"
                      maxlength="9"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row> -->
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="002 统一社会信用代码:"
                    :label-width="labelWidth + 'px'"
                    prop="unifiedSocialCreditCode"
                  >
                    <div class="input-content">
                      <div>
                        <input
                          maxlength="1"
                          v-for="(item, index) in unifiedSocialCreditCode"
                          :key="index"
                          :readonly="readonlyFlage"
                          v-model.trim="item.value"
                          :ref="'unifiedSocialCreditCode' + item.thisInput"
                          @paste="
                            pasting(
                              $event,
                              item.thisInput,
                              'unifiedSocialCreditCode'
                            )
                          "
                          @keydown.8="
                            deleteValue(
                              item.thisInput,
                              'unifiedSocialCreditCode'
                            )
                          "
                          @keyup="
                            changeValue(
                              $event,
                              item.thisInput,
                              'unifiedSocialCreditCode'
                            )
                          "
                          @input="
                            handleInputtest(
                              item.value,
                              item.thisInput,
                              'unifiedSocialCreditCode'
                            )
                          "
                        />
                      </div>
                      <el-popover
                        class="inline--question inline--question2"
                        placement="top-start"
                        title=""
                        trigger="hover"
                      >
                        <p class="iqp">{{ tip2 }}</p>
                        <p>{{ tip2a }}</p>
                        <p>{{ tip2b }}</p>
                        <p>{{ tip2c }}</p>
                        <p>{{ tip2d }}</p>
                        <i slot="reference" class="el-icon-question"></i>
                      </el-popover>
                    </div>
                    <el-input
                      class="hide-input"
                      size="small"
                      v-model.trim="commonForm.unifiedSocialCreditCode"
                      :readonly="readonlyFlage"
                      maxlength="18"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="003 机构类型:"
                    :label-width="labelWidth + 'px'"
                    prop="organizationType"
                  >
                    <div class="input-content">
                      <div>
                        <input
                          maxlength="1"
                          v-for="(item, index) in organizationType"
                          :key="index"
                          :readonly="readonlyFlage"
                          v-model.trim="item.value"
                          :ref="'organizationType' + item.thisInput"
                          @paste="
                            pasting($event, item.thisInput, 'organizationType')
                          "
                          @keydown.8="
                            deleteValue(item.thisInput, 'organizationType')
                          "
                          @keyup="
                            changeValue(
                              $event,
                              item.thisInput,
                              'organizationType'
                            )
                          "
                          @input="
                            handleInputtest(
                              item.value,
                              item.thisInput,
                              'organizationType'
                            )
                          "
                        />
                      </div>
                      <el-popover
                        class="inline--question inline--question3"
                        placement="top-start"
                        title=""
                        trigger="hover"
                      >
                        <p class="iqp">{{ tip3 }}</p>
                        <i slot="reference" class="el-icon-question"></i>
                      </el-popover>
                    </div>
                    <el-input
                      class="hide-input"
                      size="small"
                      v-model.trim="commonForm.organizationType"
                      :readonly="readonlyFlage"
                      maxlength="3"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="004 行业代码:"
                    :label-width="labelWidth + 'px'"
                    prop="industryCode"
                  >
                    <div class="input-content">
                      <div>
                        <input
                          maxlength="1"
                          v-for="(item, index) in industryCode"
                          :key="index"
                          :readonly="readonlyFlage"
                          v-model.trim="item.value"
                          :ref="'industryCode' + item.thisInput"
                          @paste="
                            pasting($event, item.thisInput, 'industryCode')
                          "
                          @keydown.8="
                            deleteValue(item.thisInput, 'industryCode')
                          "
                          @keyup="
                            changeValue($event, item.thisInput, 'industryCode')
                          "
                          @input="
                            handleInputtest(
                              item.value,
                              item.thisInput,
                              'industryCode'
                            )
                          "
                        />
                      </div>
                      <el-popover
                        class="inline--question inline--question4"
                        placement="top-start"
                        title=""
                        trigger="hover"
                      >
                        <p class="iqp">{{ tip4 }}</p>
                        <i slot="reference" class="el-icon-question"></i>
                      </el-popover>
                    </div>
                    <el-input
                      class="hide-input"
                      size="small"
                      v-model.trim="commonForm.industryCode"
                      :readonly="readonlyFlage"
                      maxlength="4"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="005 单位地址:"
                    :label-width="labelWidth + 'px'"
                  >
                    <div lass="address-area">
                      <el-input
                        size="small"
                        v-model="commonForm.companyAddressProvince"
                        :readonly="readonlyFlage"
                        class="el-input-address"
                        style="
                          width: 250px;
                          margin-right: 20px;
                          margin-bottom: 10px;
                        "
                      >
                        <template slot="append">省(自治区、直辖市)</template>
                      </el-input>
                      <el-input
                        size="small"
                        v-model="commonForm.companyAddressCity"
                        :readonly="readonlyFlage"
                        class="el-input-address"
                        style="
                          width: 250px;
                          margin-right: 20px;
                          margin-bottom: 10px;
                        "
                      >
                        <template slot="append">地(区、市、州)</template>
                      </el-input>
                      <el-input
                        size="small"
                        v-model="commonForm.companyAddressCounty"
                        :readonly="readonlyFlage"
                        class="el-input-address"
                        style="
                          width: 250px;
                          margin-right: 20px;
                          margin-bottom: 10px;
                        "
                      >
                        <template slot="append">县(市、区、旗)</template>
                      </el-input>
                      <el-input
                        size="small"
                        v-model="commonForm.companyAddressTown"
                        :readonly="readonlyFlage"
                        class="el-input-address"
                        style="width: 250px; margin-right: 20px"
                      >
                        <template slot="append">乡(镇)</template>
                      </el-input>
                      <el-input
                        size="small"
                        v-model="commonForm.companyAddressStreet"
                        :readonly="readonlyFlage"
                        class="el-input-address"
                        style="width: 250px; margin-right: 20px"
                      >
                        <template slot="append">街(村)</template>
                      </el-input>
                      <el-input
                        size="small"
                        v-model="commonForm.companyAddressHouseNum"
                        :readonly="readonlyFlage"
                        class="el-input-address"
                        style="width: 250px"
                      >
                        <template slot="append">门牌号</template>
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="007 地区划代码:"
                    :label-width="labelWidth + 'px'"
                    prop="areaCodeOfCompany"
                  >
                    <div class="input-content">
                      <div>
                        <input
                          maxlength="1"
                          v-for="(item, index) in areaCodeOfCompany"
                          :key="index"
                          :readonly="readonlyFlage"
                          v-model.trim="item.value"
                          :ref="'areaCodeOfCompany' + item.thisInput"
                          @paste="
                            pasting($event, item.thisInput, 'areaCodeOfCompany')
                          "
                          @keydown.8="
                            deleteValue(item.thisInput, 'areaCodeOfCompany')
                          "
                          @keyup="
                            changeValue(
                              $event,
                              item.thisInput,
                              'areaCodeOfCompany'
                            )
                          "
                          @input="
                            handleInputtest(
                              item.value,
                              item.thisInput,
                              'areaCodeOfCompany'
                            )
                          "
                        />
                      </div>
                      <el-popover
                        class="inline--question inline--question5"
                        placement="top-start"
                        title=""
                        trigger="hover"
                      >
                        <p class="iqp">{{ tip5 }}</p>
                        <i slot="reference" class="el-icon-question"></i>
                      </el-popover>
                    </div>
                    <el-input
                      class="hide-input"
                      size="small"
                      :readonly="readonlyFlage"
                      v-model.trim="commonForm.areaCodeOfCompany"
                      maxlength="12"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="008 联系电话:"
                    :label-width="labelWidth + 'px'"
                    prop="phone"
                  >
                    <el-input
                      size="small"
                      :readonly="readonlyFlage"
                      :style="'width: ' + lingInputwidth + 'px'"
                      v-model="commonForm.phone"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="010 其他:"
                    :label-width="labelWidth + 'px'"
                  >
                    <el-input
                      size="small"
                      type="textarea"
                      :readonly="readonlyFlage"
                      :style="'width: ' + lingInputwidth + 'px'"
                      v-model="commonForm.other"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="011 行政区划:"
                    :label-width="labelWidth + 'px'"
                    prop="administrativeDivision"
                  >
                    <DictionariesSelect
                      :showType="1"
                      :datas="commonForm.administrativeDivision"
                      :modelBinding="'administrativeDivision'"
                      :selectArr="dict.type.administrative_division.slice(1, 3)"
                      :disabled="readonlyFlage"
                      :needDefault="true"
                      @handleSelect="handleSelect"
                    ></DictionariesSelect>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="modelWay == 'comit'">
                <el-col :span="24">
                  <el-form-item
                    label="驳回原因:"
                    :label-width="labelWidth + 'px'"
                    prop=""
                  >
                    <el-input
                      size="small"
                      type="textarea"
                      :readonly="readonlyFlage"
                      :style="'width: ' + lingInputwidth + 'px'"
                      v-model="verifyMessage"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="tip-area" :offset="2">
              <el-form-item label="单位负责人:">
                <el-input
                  size="small"
                  style="width: 80px"
                  :disabled="true"
                  v-model="commonForm.headOfUnit"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="tip-area">
              <el-form-item label="统计负责人:">
                <el-input
                  size="small"
                  style="width: 80px"
                  :disabled="true"
                  v-model="commonForm.statisticalControlOfficer"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="tip-area">
              <el-form-item label="制表人:">
                <el-input
                  size="small"
                  style="width: 80px"
                  :disabled="true"
                  v-model="commonForm.lister"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="tip-area">
              <el-form-item label="制表人电话:">
                <el-input
                  size="small"
                  style="width: 120px"
                  :disabled="true"
                  v-model="commonForm.listerPhone"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="tip-area">
              <el-form-item label="填报日期:">
                <el-input
                  size="small"
                  style="width: 120px"
                  :disabled="true"
                  v-model="commonForm.fillingTime"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="24">
              <el-row>
                <el-col :span="24">
                  <span class="explain">说明:</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <span class="explain">{{ explain1 }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <span class="explain">{{ explain2 }}</span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <form-button
        slot="footer"
        cancel-text="关闭"
        @cancel="handleClose"
        :showSubmitButton="false"
      >
        <el-button
          slot=""
          type="primary"
          @click="handleSubmit"
          size="small"
          v-show="modelWay == 'add' || modelWay == 'edit'"
        >
          确认{{ modelWay == "add" ? "新增" : "修改" }}
        </el-button>
        <el-button
          slot=""
          type="primary"
          @click="handleSubmit"
          size="small"
          v-show="modelWay == 'report'"
        >
          提交
        </el-button>
        <el-button
          slot=""
          type="primary"
          @click="handleUp"
          size="small"
          v-show="modelWay == 'up'"
        >
          上报
        </el-button>
        <el-button
          slot=""
          type="primary"
          @click="handleComit"
          size="small"
          v-show="modelWay == 'comit'"
        >
          确认
        </el-button>
        <el-button
          slot=""
          type="primary"
          @click="handleCheck(0)"
          size="small"
          v-show="modelWay == 'audit'"
        >
          通过
        </el-button>
        <el-button
          slot=""
          type="danger"
          plain
          @click="handleCheck(1)"
          size="small"
          v-show="modelWay == 'audit'"
        >
          驳回
        </el-button>
      </form-button>
    </zeda-dialog>
    <Check
      :visible.sync="checkVisible"
      :checkId="checkId"
      :verifyMessage="verifyMessage"
      :checkWay="'common'"
      :checkstatus="checkstatus"
      :statusFlage="statusFlage"
    />
  </div>
</template>

<script>
import FormButton from "@/components/FormButton";
import Check from "@/views/work/standingbook/components/check.vue";
import DictionariesSelect from "@/components/DictionariesSelect/index.vue";
import {
  replaceInteger,
  onlyOnenumber,
  allowNumberandletter,
  deepClone,
} from "@/utils/index";
import detailConst from "@/views/work/standingbook/common/components/detailConst";
import {
  getInstitutiondetail,
  postInstitution,
  putInstitution,
  reportInstitution,
  getExportpdf,
  upInstitution,
  postConfirm,
} from "@/api/standingbook/common.js";
import { validPhoe, validMobile } from "@/utils/validate.js";
import { exportExecl } from "@/utils/export-execl";
export default {
  components: {
    FormButton,
    Check,
    DictionariesSelect,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
    modelWay: { type: String, default: "" }, // add 新增、 report 提交 、 edit 修改、 audit 审核、 look 查看、 up 上报、 comit 上报
  },
  dicts: ["administrative_division"],
  data() {
    return {
      year: "",
      checkVisible: false, // 审核弹出层开关
      checkId: null, // 审核该表单的ID
      statusFlage: null, // 该表单所处的状态
      checkstatus: null, // 审核通过/驳回
      verifyMessage: null, // 审核意见
      readonlyFlage: false,
      exportFlage: false,
      labelWidth: 200,
      topInputwidth: 120,
      lingInputwidth: 500,
      commonForm: {
        tableCode: "", // 表号
        enactingOrgan: "", // 制定机关
        approvalOrgan: "", // 批准机关
        approvalDocumentNum: "", // 批准文号
        periodOfValidity: "", // 有效期
        companyName: "",
        organizationStructureCode: "", // 组织结构代码
        unifiedSocialCreditCode: "", // 统一社会信用代码
        organizationType: "", // 机构类型
        industryCode: "", // 行业代码
        areaCodeOfCompany: "", // 单位所在地区划代码
        companyAddressProvince: "", // 省
        companyAddressCity: "", // 地市
        companyAddressCounty: "", // 县
        companyAddressTown: "", // 乡
        companyAddressStreet: "", // 街
        companyAddressHouseNum: "", // 门牌号
        phone: "",
        other: "",
        headOfUnit: "",
        statisticalControlOfficer: "",
        lister: "",
        listerPhone: "",
        fillingTime: "",
        administrativeDivision: "", // 行政区划
      },
      commonRules: {
        administrativeDivision: [
          { required: true, message: "行政区划不能为空", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "单位名称不能为空", trigger: "blur" },
        ],
        unifiedSocialCreditCode: [
          { required: true, message: "统一信用代码不能为空", trigger: "blur" },
        ],
        organizationType: [
          { required: true, message: "机构类型不能为空", trigger: "blur" },
        ],
        industryCode: [
          { required: true, message: "行业代码不能为空", trigger: "blur" },
        ],
        areaCodeOfCompany: [
          { required: true, message: "地区划分码不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
          { validator: this.validPhoetest },
        ],
      },
      // 组织结构代码
      organizationStructureCode: detailConst.organizationArr,
      // 统一社会信用代码
      unifiedSocialCreditCode: detailConst.societyArr,
      // 机构类型
      organizationType: detailConst.institutionArr,
      // 行业代码
      industryCode: detailConst.industryArr,
      // 单位所在地区划代码
      areaCodeOfCompany: detailConst.regionArr,
      // 文字提示
      explain1: detailConst.explain1,
      explain2: detailConst.explain2,
      tip1: detailConst.tip1,
      tip2: detailConst.tip2,
      tip2a: detailConst.tip2a,
      tip2b: detailConst.tip2b,
      tip2c: detailConst.tip2c,
      tip2d: detailConst.tip2d,
      tip3: detailConst.tip3,
      tip4: detailConst.tip4,
      tip5: detailConst.tip5,
    };
  },
  created() {},
  watch: {
    visible(value) {
      // && String(this.id).length > 0
      if (value) {
        this.getYeartoshow();
        this.resetData();
        this.modelWayjudge();
      }
    },
  },
  methods: {
    handleSelect(val, flage, type) {
      // if (type === "0") {
      //   if (this.commonForm[flage] === null || this.commonForm[flage] === "") {
      //     this.commonForm[flage] = val;
      //   }
      // } else {
      this.commonForm[flage] = val;
      // }
    },
    getYeartoshow() {
      let date = new Date();
      let year = date.getFullYear().toString();
      this.year = year.slice(2);
    },
    // 判断打开的模板
    modelWayjudge() {
      switch (this.modelWay) {
        case "add":
          this.readonlyFlage = false;
          this.exportFlage = false;
          this.getMymsg();
          break;
        case "report":
          this.readonlyFlage = true;
          this.exportFlage = true;
          this.getInfo();
          break;
        case "edit":
          this.readonlyFlage = false;
          this.exportFlage = false;
          this.getInfo();
          break;
        case "audit":
          this.readonlyFlage = true;
          this.exportFlage = true;
          this.getInfo();
          break;
        case "look":
          this.readonlyFlage = true;
          this.exportFlage = true;
          this.getInfo();
          break;
        case "up":
          this.readonlyFlage = true;
          this.exportFlage = true;
          this.getInfo();
          break;
        case "comit":
          this.readonlyFlage = true;
          this.exportFlage = false;
          this.getInfo();
          break;
      }
    },
    /* 校验 */
    validPhoetest(rule, value, callback) {
      if (!validPhoe(value) && !validMobile(value)) {
        callback("联系电话格式不正确");
      } else {
        callback();
      }
    },
    validtest(data, thisInputf, formitem) {
      switch (formitem) {
        case "organizationStructureCode":
          this.valid0rganization(data, thisInputf);
          break;
        case "unifiedSocialCreditCode":
          this.validSociety(data, thisInputf);
          break;
        case "organizationType":
          this.validOrganiz(data, thisInputf);
          break;
        case "industryCode":
          this.validIndustry(data, thisInputf);
          break;
        case "areaCodeOfCompany":
          this.validAreacode(data, thisInputf);
          break;
      }
    },
    // 组织结构代码校验
    valid0rganization(data, thisInputf) {
      this.organizationStructureCode.map((item) => {
        if (item.thisInput == thisInputf) {
          if (item.thisInput != "input8") {
            item.value = onlyOnenumber(data); // 必须是string 才能拼接
          } else {
            item.value = allowNumberandletter(data); // 最后一位校验码
          }
        }
      });
    },
    // 统一社会信用代码校验
    validSociety(data, thisInputf) {
      if (thisInputf == "input0") {
        this.societyTest0(data);
      } else if (thisInputf == "input1") {
        this.societyTest1(data);
      } else {
        this.unifiedSocialCreditCode.map((item) => {
          if (item.thisInput == thisInputf) {
            item.value = allowNumberandletter(data);
          }
        });
      }
      // switch (thisInputf) {
      //   case "input0":
      //     this.societyTest0(data);
      //     break;
      //   case "input1":
      //     this.societyTest1(data);
      //     break;
      // }
    },
    societyTest0(data) {
      if (data == "1" || data == "5" || data == "9" || data == "Y") {
        this.unifiedSocialCreditCode[0].value = data;
      } else {
        this.unifiedSocialCreditCode[0].value = "";
      }
    },
    societyTest1(data) {
      if (data == "1" || data == "2" || data == "3") {
        this.unifiedSocialCreditCode[1].value = data;
      } else {
        this.unifiedSocialCreditCode[1].value = "";
      }
    },
    validOrganiz(data, thisInputf) {
      this.organizationType.map((item) => {
        if (item.thisInput == thisInputf) {
          item.value = onlyOnenumber(data);
        }
      });
    },
    validIndustry(data, thisInputf) {
      this.industryCode.map((item) => {
        if (item.thisInput == thisInputf) {
          item.value = allowNumberandletter(data);
        }
      });
    },
    validAreacode(data, thisInputf) {
      this.areaCodeOfCompany.map((item) => {
        if (item.thisInput == thisInputf) {
          item.value = allowNumberandletter(data);
        }
      });
    },
    // 获取详情{}
    getInfo() {
      if (this.id && this.id != "") {
        getInstitutiondetail(this.id)
          .then((res) => {
            if (res.code === 700) {
              this.$message.warning(res.msg);
              return false;
            } else {
              if (res.code == 200) {
                // 表单状态
                this.statusFlage = res?.data?.status;
                // 表头数据
                this.commonForm.tableCode = res?.data?.tableCode;
                this.commonForm.enactingOrgan = res?.data?.enactingOrgan;
                this.commonForm.approvalOrgan = res?.data?.approvalOrgan;
                this.commonForm.approvalDocumentNum =
                  res?.data?.approvalDocumentNum;
                this.commonForm.periodOfValidity = res?.data?.periodOfValidity;
                // 表格数据
                this.commonForm.companyName = res?.data?.companyName;
                this.commonForm.organizationStructureCode =
                  res?.data?.organizationStructureCode ?? "";
                this.allocationInput(
                  this.commonForm.organizationStructureCode,
                  "organizationStructureCode"
                );
                this.commonForm.unifiedSocialCreditCode =
                  res?.data?.unifiedSocialCreditCode;
                this.allocationInput(
                  this.commonForm.unifiedSocialCreditCode,
                  "unifiedSocialCreditCode"
                );
                this.commonForm.organizationType = res?.data?.organizationType;
                this.allocationInput(
                  this.commonForm.organizationType,
                  "organizationType"
                );
                this.commonForm.industryCode = res?.data?.industryCode;
                this.allocationInput(
                  this.commonForm.industryCode,
                  "industryCode"
                );
                this.commonForm.areaCodeOfCompany =
                  res?.data?.areaCodeOfCompany;
                this.allocationInput(
                  this.commonForm.areaCodeOfCompany,
                  "areaCodeOfCompany"
                );
                // 地址
                this.commonForm.companyAddressProvince =
                  res?.data?.companyAddressProvince;
                this.commonForm.companyAddressCity =
                  res?.data?.companyAddressCity;
                this.commonForm.companyAddressCounty =
                  res?.data?.companyAddressCounty;
                this.commonForm.companyAddressTown =
                  res?.data?.companyAddressTown;
                this.commonForm.companyAddressStreet =
                  res?.data?.companyAddressStreet;
                this.commonForm.companyAddressHouseNum =
                  res?.data?.companyAddressHouseNum;
                this.commonForm.phone = res?.data?.phone;
                this.commonForm.other = res?.data?.other;
                // 行政区划
                this.commonForm.administrativeDivision =
                  res?.data?.administrativeDivision;
                // 表尾
                this.commonForm.headOfUnit = res?.data?.headOfUnit;
                this.commonForm.statisticalControlOfficer =
                  res?.data?.statisticalControlOfficer;
                this.commonForm.lister = res?.data?.lister;
                this.commonForm.listerPhone = res?.data?.listerPhone;
                this.commonForm.fillingTime = res?.data?.fillingTime;
                // 审核意见
                this.verifyMessage = res?.data?.verifyMessage;
              }
            }
          })
          .catch((err) => {
            // this.$message.error("系统错误,请联系管理员!20032");
          });
      }
    },
    // 获取使用者信息
    getMymsg() {
      this.commonForm.lister = this.$store.state.user.name;
      this.commonForm.listerPhone = this.$store.state.user.phonenumber;
    },
    // 重置表单
    resetData() {
      this.commonForm = {
        tableCode: "", // 表号
        enactingOrgan: "", // 制定机关
        approvalOrgan: "", // 批准机关
        approvalDocumentNum: "", // 批准文号
        periodOfValidity: "", // 有效期
        companyName: "",
        organizationStructureCode: "",
        unifiedSocialCreditCode: "",
        organizationType: "",
        industryCode: "",
        areaCodeOfCompany: "",
        companyAddressProvince: "", // 省
        companyAddressCity: "", // 地市
        companyAddressCounty: "", // 县
        companyAddressTown: "", // 乡
        companyAddressStreet: "", // 街
        companyAddressHouseNum: "", // 门牌号
        phone: "",
        other: "",
        headOfUnit: "",
        statisticalControlOfficer: "",
        lister: "",
        listerPhone: "",
        fillingTime: "",
        administrativeDivision: "", // 行政区划
      };
      this.allresetInput("organizationStructureCode");
      this.allresetInput("unifiedSocialCreditCode");
      this.allresetInput("organizationType");
      this.allresetInput("industryCode");
      this.allresetInput("areaCodeOfCompany");
    },
    // 统一输入框分配多个输入框
    allocationInput(data, flage) {
      let arr = [];
      arr = data.split("");
      this[flage].map((item, index) => {
        item.value = arr[index];
      });
    },
    // 统一输入置空
    allresetInput(flage) {
      this[flage].map((item, index) => {
        item.value = "";
      });
    },
    handleClose(status) {
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
    // 审核
    handleCheck(flage) {
      setTimeout(() => {
        this.checkVisible = true;
        this.checkId = this.id;
        this.checkstatus = flage;
      }, 100);
    },
    // 导出
    handleExport() {
      let that = this;
      if (this.id && this.id != "") {
        exportExecl(
          "公共机构基础信息",
          `/system/institutions/export/pdf/${this.id}`,
          {},
          this,
          ".pdf"
        );
      }
    },
    // 确认
    handleComit() {
      this.$confirm("是否已经确认该表单驳回的原因?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postConfirm({ id: this.id })
            .then((res) => {
              if (res.code === 700) {
                this.$message.warning(res.msg);
                return false;
              }
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "确认驳回成功!",
                });
                this.handleClose(true);
              }
            })
            .catch((err) => {
              // this.$message.error("系统错误,请联系管理员!200392");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 上报
    handleUp() {
      let txt = "上报";
      this.$confirm("确认" + txt + "该表单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          upInstitution(this.id)
            .then((res) => {
              if (res.code === 700) {
                this.$message.warning(res.msg);
                return false;
              }
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: txt + "成功!",
                });
                this.handleClose(true);
              }
            })
            .catch((err) => {
              // this.$message.error("系统错误,请联系管理员!200391");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 确认新增/修改  提交
    handleSubmit() {
      let params = this.formDatadeal(); // 先处理再校验，不然必填项无法通过
      this.$refs["commonform"].validate((valid) => {
        if (valid) {
          // if (
          //   this.commonForm.organizationStructureCode == "" &&
          //   this.commonForm.unifiedSocialCreditCode == ""
          // ) {
          //   this.$message({
          //     message: "社会信用代码必填",
          //     type: "warning",
          //   });
          //   return;
          // }
          let txt = "";
          let reuqestWay;
          switch (this.modelWay) {
            case "add":
              txt = "新增";
              reuqestWay = "requestAdd";
              break;
            case "report":
              txt = "提交";
              reuqestWay = "requestReport";
              break;
            case "edit":
              txt = "修改";
              reuqestWay = "requestEdit";
              break;
          }
          this.$confirm("确认" + txt + "该表单吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this[reuqestWay](params);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        }
      });
    },
    // * 表单数据处理
    formDatadeal(flage) {
      // 多输入框合围
      let inputArr = [
        "organizationStructureCode",
        "unifiedSocialCreditCode",
        "organizationType",
        "industryCode",
        "areaCodeOfCompany",
      ];
      inputArr.map((item) => {
        this.commonForm[item] = "";
        this[item].map((tig) => {
          if (tig.value) {
            this.commonForm[item] += tig.value;
          }
        });
      });
      // if (flage == "add") {
      //   this.commonForm.tableCode = null;
      //   this.commonForm.enactingOrgan = null;
      //   this.commonForm.approvalOrgan = null;
      //   this.commonForm.approvalDocumentNum = null;
      //   this.commonForm.periodOfValidity = null;
      //   this.commonForm.fillingTime = null;
      // }
      let params = { ...this.commonForm };
      return params;
    },
    // todo 新增接口
    requestAdd(params) {
      // let params = this.formDatadeal("add");
      params.tableCode = null;
      params.enactingOrgan = null;
      params.approvalOrgan = null;
      params.approvalDocumentNum = null;
      params.periodOfValidity = null;
      params.fillingTime = null;
      postInstitution(params)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          } else {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功!",
              });
              this.handleClose(true);
            }
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!20035");
        });
    },
    // todo 修改接口
    requestEdit(params) {
      // let params = this.formDatadeal("edit");
      params.id = this.id || "";
      putInstitution(params)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          } else {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "修改成功!",
              });
              this.handleClose(true);
            }
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!20036");
        });
    },
    // todo 提交接口
    requestReport() {
      if (this.id && this.id != "") {
        reportInstitution(this.id)
          .then((res) => {
            if (res.code === 700) {
              this.$message.warning(res.msg);
              return false;
            } else {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "提交成功!",
                });
                this.handleClose(true);
              }
            }
          })
          .catch((err) => {
            // this.$message.error("系统错误,请联系管理员!20037");
          });
      }
    },
    deleteValue(thisInputf, formitem) {
      let that = this;
      that[formitem].map((item) => {
        if (item.thisInput == thisInputf) {
          if (item.value > 0) {
            // 当前有值，清空之
            item.value = "";
          } else {
            // 当前没有值，光标跳转到上一个input，并清空该input值
            that.$nextTick(() => {
              item.value = "";
              that.$refs[formitem + item.lastInput][0].focus();
              that[formitem].map((tig) => {
                if (item.lastInput == tig.thisInput) {
                  tig.value = "";
                }
              });
            });
          }
        }
      });
    },
    changeValue(e, thisInputf, formitem) {
      let that = this;
      if (e.keyCode !== 8) {
        // 键盘抬起时$event，当前input，下一个input
        that.$nextTick(() => {
          that[formitem].map((item) => {
            if (item.thisInput == thisInputf) {
              // 通过输入校验才有值
              if (item.value != "") {
                that.$refs[formitem + item.nextInput][0].focus(); // 截取当前值最后一位，跳到下一个input
                item.value = item.value.slice(-1);
              }
            }
          });
        });
      }
    },
    // 输入校验
    handleInputtest(data, thisInputf, formitem) {
      const flage = this.validtest(data, thisInputf, formitem); // 数据校验
      return flage;
    },
    // 粘贴功能
    pasting(e, thisInputf, formitem) {
      let that = this;
      let val = e.clipboardData.getData("Text"); // 所需粘贴的值
      if (typeof val == "string") {
        let arr = val.split("");
        // 数组还需要处理掉 空字符串 - 等等
        arr.map((item, index) => {
          if (item == "" || item == "-" || item == ",") {
            arr.splice(index, 1);
          }
        });
        if (arr.length > 0) {
          let flage = 0;
          that[formitem].map((item) => {
            if (item.value == "") {
              flage++;
            }
          });
          if (flage == that[formitem].length) {
            // 全部为空则从第一个开始赋值
            if (arr.length <= that[formitem].length) {
              arr = arr;
            } else {
              arr = arr.slice(0, that[formitem].length);
            }
            arr.map((item, index) => {
              that[formitem][index].value = arr[index];
            });
          } else {
            // 若一开始有值，则从选中的input开始赋值
            that[formitem].map((item, indexf) => {
              if (item.thisInput == thisInputf) {
                if (arr.length <= that[formitem].length) {
                  arr = arr;
                } else {
                  arr = arr.slice(0, that[formitem].length - indexf);
                }
                arr.map((item, index) => {
                  that[formitem][index + indexf].value = arr[index];
                });
              }
            });
          }
        }
      } else {
        that[formitem].map((item) => {
          item.value = "";
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.table-title-area {
  // text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  .table-title {
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 28px;
    color: rgb(16, 16, 16);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 40px;
    text-decoration: none;
  }
}

.single-label {
  height: 28px;
  margin: 2px;
}
.single-down {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .down-label {
    height: 28px;
    // margin-top: 112px;
  }
}

.table-row {
  border-top: 4px solid #d2d2d8;
  border-bottom: 4px solid #d2d2d8;
  padding: 20px 0 10px 0;
  margin-bottom: 10px;
}

.hide-input {
  width: 400px;
  position: absolute;
  top: -999999px;
  left: -999999px;
}
// 六个input时的样式
.input-content {
  // padding: 20px;
  input {
    vertical-align: middle;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-right: 5px;
    border: 1px solid silver;
    padding: 0;
    font-size: 30px;
  }
  /* 去掉input[type=number]浏览器默认的icon显示 */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    // chrome
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  input {
    // 火狐
    -moz-appearance: textfield;
  }
  .inline-input {
    &:last-child {
      margin-left: 50px !important;
    }
  }
  .inline--question {
    font-size: 20px;
    position: absolute;
    top: 6px;
    // .iqp {
    //   width: 200px;
    // }
  }
  .inline--question1 {
    left: 460px;
  }
  .inline--question2 {
    left: 816px;
  }
  .inline--question3 {
    left: 138px;
  }
  .inline--question4 {
    left: 182px;
  }
  .inline--question5 {
    left: 546px;
  }
}

.organization-line {
  height: 40px;
  width: 40px;
  position: absolute;
  top: -3px;
  left: 363px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
}

.address-area {
  width: 100%;
  // .el-input-address{
  //   margin-right: 20px;
  //   width: 100px;
  // }
  // display: flex;
  // flex-wrap: wrap;
  // align-items: center;
  // justify-content: space-around;
  // .el-input__inner {
  //   margin-right: 20px !important;
  // }
  // ::v-deep .el-input {
  //   width: 100px !important;
  //   // margin-right: 20px !important;
  //   &:nth-child(1) {
  //   }
  // }
}

.tip-area {
  height: 30px;
}
.explain {
  display: inline-block;
  font-family: SourceHanSansSC;
  font-weight: 400;
  font-size: 16px;
  color: rgb(16, 16, 16);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 24px;
  text-decoration: none;
}

.el-icon-question {
  color: #e6a23c;
}
</style>
